<template>
<!-- 测试骨架 -->
<!-- <Skeleton :width='80' :height="20" background='red'/> -->
<!-- <Skeleton/> -->
<!-- <input v-border="color"> -->
  <div class="container">
    <!-- 1.左侧分类 -->
    <HomeCate />
    <!-- 2.右侧轮播图 -->
    <HomeBanner />
    <!-- 3.新鲜好物 -->
    <HomeNew />
    <!-- 4.人气推荐 -->
    <HomeHot />
    <!-- 5.楼层组件 -->
    <HomeProd/>
  </div>
</template>

<script>
import HomeCate from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeProd from './components/home-product.vue'
import { ref } from 'vue'

export default {
  setup () {
    const color = ref('blue')
    return { color }
  },
  components: {
    HomeCate,
    HomeBanner,
    HomeNew,
    HomeHot,
    HomeProd
  }
}
</script>

<style lang="less" scoped>
/**
说明：
  vue2使用@符号，需在前面加~
  vue3不需要
*/
// 手动导入
// @import '@/styles/var.less';
// 无法复用
// @warnColor:#FFB302;
.test {
  color: @sucColor;
  border: 2px solid @warnColor;
}
</style>
